<template>
    <view>
        <view class="navbox">
            <view class="navtext" v-for="(item, index) in navList" :key="index" :class="{ 'text5': index == navindex }"
                @click="switchnav(index)">
                {{ item.text }}
                <view class="downline" v-if="index == navindex"></view>
            </view>
        </view>
        <view class="shopbox" v-if="shopList.length > 0">
            <view class="shopcont" v-for="(item, index) in shopList" :key="index">
                <view class="shop_top">
                    <image class="shop_img" :src="getimageFirst(item.Images)" mode="aspectFill"></image>
                    <view class="shop_info">
                        <view class="shop_namebox">
                            <view class="name_til hiddenText">{{ item.ProductName }}</view>
                            <view class="name_status">{{ item.Status == 1 ? '在售' : item.Status == 0 ? '草稿' : '下架' }}
                            </view>
                        </view>
                        <view class="shop_spbox">
                            <view class="sp_til hiddenText">{{ item.ProductStyleList[0].Style }}</view>
                            <image class="sp_arr"
                                src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262728923388.png"
                                @click="changestyle(index)"></image>
                            <!-- <view class="stylebox" v-if="isstyle == index">
                            <view  v-for="(value,i) in item.ProductStyleList" :key="i">
                                <view class="sp_til hiddenText" @click="getstyle(value)">{{value.Style}}</view>
                            </view>
                            
                        </view> -->
                        </view>
                        <view class="shop_price"><text class="price_icon">￥</text>{{ item.Price + ' ' }}<text
                                class="price_icon">+&nbsp;{{ item.Score }}挥豆</text></view>
                    </view>
                </view>
                <view class="shop_btnbox">
                    <view class="btn_box">
                        <image class="btn_icon"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262748225540.png"></image>
                        <view class="btn_text" @click="nav_to('/pages/manage/goodes_change?id=' + item.ID)">编辑</view>
                    </view>
                    <view class="btn_line"></view>
                    <view v-if="item.Status == 1" class="btn_box" @click="Off(item, index)">
                        <image class="btn_icon"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262761838855.png"></image>
                        <view class="btn_text">下架</view>
                    </view>
                    <view v-if="item.Status != 1" class="btn_box" @click="upShop(item, index)">
                        <image class="btn_icon"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732262761838855.png"></image>
                        <view class="btn_text">上架</view>
                    </view>
                </view>
            </view>
        </view>
        <block v-else>
            <u-empty mode="list" width="100" height="100"
                icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                iconSize="32" text="暂无商品"></u-empty>
        </block>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            navList: [
                {
                    text: '全部',
                    status: 99,
                },
                {
                    text: '在售',
                    status: 1,
                },
                {
                    text: '下架',
                    status: -1,
                },
                {
                    text: '草稿',
                    status: 0,
                },
            ],
            navindex: 0,
            PageIndex: 1,
            shopList: [],
            isMore: true,
            isstyle: -1,
            styleText: '',
        };
    },
    onLoad(e) {
        this.navindex = e.index
        this.MyProducts()
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
            this.MyProducts();
        }
    },
    methods: {
        getimageFirst(Images = '') {
            if (Images) {
                let imglist = Images.split(',')
                console.log(imglist, 'dd');

                return imglist[0] || ''
            }

        },
        //上架
        async upShop(item, index) {
            let _this = this
            uni.showModal({
                title: '温馨提示',
                content: '您确定要重新上架这件商品吗?',
                confirmText: "确定",
                success: async function (res) {
                    if (res.confirm) {
                        let res1 = await _this.$api.post('Products/Up', {
                            ID: item.ID
                        });
                        if (res1.code == 0) {
                            _this.$pv.msg('上架成功');
                            _this.shopList[index].Status = 1
                        } else {
                            _this.$pv.msg(res1.message);
                        }
                    } else if (res.cancel) {
                    }
                }
            });
        },
        getstyle(value) {
            this.styleText = value.Style
            this.isstyle = -1
        },
        changestyle(index) {
            // this.isstyle = index
        },
        switchnav(index) {
            this.navindex = index
            this.MyProducts()
        },

        async MyProducts() {
            let res = await this.$api.post('Products/MyProducts', {
                Status: this.navList[this.navindex].status || this.navList[0].status,
                ProductName: '',
                PageIndex: this.PageIndex,
                PageSize: 10,
            })
            if (res.code == 0) {
                if (this.PageIndex == 1) {
                    this.shopList = res.data
                } else {
                    this.shopList = this.shopList.concat(res.data)
                }
                this.isMore = Array.isArray(res.data) && res.data.length >= 10;

            }
        },
        async Off(item, index) {
            let _this = this
            uni.showModal({
                title: '温馨提示',
                content: '您确定要下架这件商品吗?',
                confirmText: "确定",
                success: async function (res) {
                    if (res.confirm) {
                        let res1 = await _this.$api.post('Products/Off', {
                            ID: item.ID
                        });
                        if (res1.code == 0) {
                            _this.$pv.msg('下架成功');
                            _this.shopList[index].Status = -1
                        } else {
                            _this.$pv.msg(res1.message);
                        }
                    } else if (res.cancel) {
                    }
                }
            });
        },
    },
}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.navbox {
    width: 750rpx;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;

    .navtext {
        width: calc(100% / 4);
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        position: relative;
        font-size: 28rpx;
        color: #666666;

        .downline {
            width: 48rpx;
            height: 6rpx;
            background: #FF6030;
            border-radius: 5rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .text5 {
        font-size: 32rpx !important;
        font-weight: bold;
        color: #FF6030;
    }
}

.shopbox {
    margin-top: 112rpx;
    padding-bottom: 100rpx;

    .shopcont {
        width: 100%;
        height: 366rpx;
        background-color: #fff;
        margin-bottom: 16rpx;

        .shop_top {
            width: calc(100% - 32rpx);
            height: 268rpx;
            margin-left: 32rpx;
            padding: 32rpx 0;
            box-sizing: border-box;
            border-bottom: 1rpx solid #e4e4e4;
            display: flex;

            .shop_img {
                width: 204rpx;
                height: 204rpx;
                border-radius: 16rpx;
                margin-right: 24rpx;
                background-color: red;
            }

            .shop_info {
                flex: 1;

                .shop_namebox {
                    display: flex;
                    align-items: center;
                    margin-bottom: 16rpx;

                    .name_til {
                        font-size: 28rpx;
                        font-weight: bold;
                        width: 386rpx;
                    }

                    .name_status {
                        font-size: 24rpx;
                        color: #FF6030;
                    }
                }

                .shop_spbox {
                    width: 424rpx;
                    height: 48rpx;
                    background: #F2F2F2;
                    border-radius: 28rpx;
                    padding: 8rpx 16rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    position: relative;

                    .stylebox {
                        width: 424rpx;
                        background: #F2F2F2;
                        padding: 8rpx 16rpx;
                        position: absolute;
                        bottom: -40px;
                        left: 0;
                    }

                    .sp_til {
                        font-size: 24rpx;
                        color: #666666;
                        width: 360rpx;
                        margin-right: 8rpx;
                    }

                    .sp_arr {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }

                .shop_price {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #F91C1C;
                    margin-top: 56rpx;

                    .price_icon {
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #F91C1C;
                    }
                }
            }
        }

        .shop_btnbox {
            display: flex;
            height: 96rpx;
            align-items: center;

            .btn_line {
                width: 2rpx;
                height: 30rpx;
                border-right: 2rpx solid #E4E4E4;
            }

            .btn_box {
                width: 49%;
                display: flex;
                align-items: center;
                justify-content: center;

                .btn_icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }

                .btn_text {
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>